import React from 'react';
import { Menu } from 'antd';
import {
  HomeOutlined,
  BookOutlined,
  ToolOutlined,
  UserOutlined,
  BankOutlined,
  MoneyCollectOutlined
} from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';

const { SubMenu } = Menu;

const menuConfig = [
  {
    key: '/dashboard',
    icon: <HomeOutlined />, label: '运营总览'
  },
  {
    key: '/content', icon: <BookOutlined />, label: '内容管理', children: [
      { key: '/content/publish', label: '文章发布管理' },
      { key: '/content/comment', label: '内容评论管理' }
    ]
  },
  {
    key: '/business', icon: <ToolOutlined />, label: '招商管理', children: [
      { key: '/business/contract', label: '合同签订管理' },
      { key: '/business/customer', label: '客户信息管理' }
    ]
  },
  {
    key: '/tenant', icon: <UserOutlined />, label: '租户管理', children: [
      { key: '/tenant/info', label: '租户信息管理' },
      { key: '/tenant/staff', label: '租户人员管理' }
    ]
  },
  {
    key: '/asset', icon: <BankOutlined />, label: '资产管理', children: [
      { key: '/asset/building', label: '楼宇信息管理' },
      { key: '/asset/public', label: '公共资源管理' }
    ]
  },
  {
    key: '/bill', icon: <MoneyCollectOutlined />, label: '账单管理', children: [
      { key: '/bill/car', label: '车辆收费账单' },
      { key: '/bill/tenant', label: '租户账单管理' }
    ]
  }
];

const Sidebar = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 选中项和展开项
  let selectedKey = location.pathname;
  // 如果当前路径不是菜单key，尝试回退到父级key
  if (!menuConfig.some(item => item.key === selectedKey) && !menuConfig.some(item => item.children && item.children.some(child => child.key === selectedKey))) {
    // 取第一级路径作为父级key
    const firstLevel = '/' + selectedKey.split('/')[1];
    if (menuConfig.some(item => item.key === firstLevel)) {
      selectedKey = firstLevel;
    }
  }
  const selectedKeys = [selectedKey];
  const openKeys = menuConfig
    .filter(item => item.children && item.children.some(child => location.pathname.startsWith(child.key)))
    .map(item => item.key);

  return (
    <div style={{
      width: 220,
      height: '100vh',
      background: '#3b5b7e',
      color: '#fff',
      position: 'fixed',
      left: 0,
      top: 0,
      zIndex: 100,
      boxShadow: '2px 0 8px rgba(0,0,0,0.08)'
    }}>
      <div style={{
        height: 56,
        background: '#228be6',
        display: 'flex',
        alignItems: 'center',
        paddingLeft: 18,
        fontWeight: 700,
        fontSize: 18,
        color: '#fff'
      }}>
        <HomeOutlined style={{ marginRight: 10, fontSize: 20 }} />
        运营总览
      </div>
      <Menu
        mode="inline"
        selectedKeys={selectedKeys}
        defaultOpenKeys={openKeys}
        style={{
          background: 'transparent',
          color: '#fff',
          borderRight: 0,
          fontSize: 16,
          fontWeight: 500,
          marginTop: 8
        }}
        theme="dark"
        onClick={({ key }) => navigate(key)}
      >
        {menuConfig.map(item =>
          item.children ? (
            <SubMenu key={item.key} icon={item.icon} title={item.label}>
              {item.children.map(child => (
                <Menu.Item key={child.key}>{child.label}</Menu.Item>
              ))}
            </SubMenu>
          ) : (
            <Menu.Item key={item.key} icon={item.icon}>{item.label}</Menu.Item>
          )
        )}
      </Menu>
    </div>
  );
};

export default Sidebar; 